<template>
	<view class="login" :style="themeStore.theme">
		<view class="loginDiv" v-if="!isBindAccount">
			<view class="title">账号绑定</view>
			<view class="content">
				<uni-forms ref="loginForm" :value="formData" :rules="rules" labelPosition="top" labelWidth="200">
					<uni-forms-item label="账号" name="username" required>
						<uni-easyinput v-model="formData.username" clearable placeholder="请输入账号" />
					</uni-forms-item>
					<uni-forms-item label="密码" name="password" required>
						<uni-easyinput v-model="formData.password" type="password" clearable placeholder="请输入密码" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="loginbtn" @click="handleBind">确定</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { reactive, ref, getCurrentInstance } from 'vue';
	import { onReady, onLoad } from "@dcloudio/uni-app";
	import { login, getInfo } from "@/api/login.js";
	const { proxy } = getCurrentInstance();
	import useUserStore from '@/store/user.js';
	import useThemeStore from '@/store/theme.js';
	const themeStore = useThemeStore()
	const loginForm = ref(null)
	const formData = reactive({
		ostype: 3,//设备类型 0:未知 1：web 2:app 3:小程序/h5 4:脚本
		logintype: 3,//0 账号登录，1 短信登录 2:扫描登录 3：小程序登录 4:自动登录 5:指纹登录 6：人脸识别
		username: '',//测试环境 apptest，线上环境 lushan
		password: '',//测试环境 RT123456，线上环境 Rl7824110!
	});
	const isBindAccount = ref(true) //默认：账号已绑定

	const rules = reactive({
		username: {
			rules: [{
				required: true,
				errorMessage: "请输入账号",
			},],
		},
		password: {
			rules: [{
				required: true,
				errorMessage: "请输入密码",
			},],
		},
	})

	onLoad(() => {
		useThemeStore().setTheme("blue");
		uni.clearStorageSync();
		wx.login({
			success: (result) => {
				if (result.code) {
					formData.username = "code";//免登
					formData.password = result.code;//免登
					login(formData).then((res) => {
						let openid = res.openid;
						let token = res.token;
						if (token) {
							// 绑定账号
							isBindAccount.value = true;
							uni.setStorageSync("token", token);
							useUserStore().setToken(token);
							getUserInfo();
						} else {
							// 未绑定账号
							if (!openid) {
								uni.showToast({
									title: '微信小程序openid获取失败，请稍后重试',
									icon: 'none'
								});
								return;
							}
							isBindAccount.value = false;
							formData.username = "";
							formData.password = "";
							formData.logintype = 0;
							formData["openid"] = openid;
						}
					});
				}
			},
		});
	});

	// 绑定账号
	function handleBind() {
		loginForm.value.validate().then((valid = false) => {
			if (valid) {
				login(formData).then((res) => {
					let token = res.token;
					if (token) {
						uni.setStorageSync("token", token);
						useUserStore().setToken(token);
						getUserInfo();
					}
				});
			}
		});
	}

	// 获取用户信息
	function getUserInfo() {
		getInfo({ auth: 1 }).then(res => {
			// roleId，1000-2000管理组，2000-3000维修组，30000以上客户组
			let auth = res.auth || {};
			let pmset = auth["/pmset"] || {};
			let ptm = pmset["ptm"] || 0;
			uni.setStorageSync("userInfo", res.user);
			useUserStore().setPtm(ptm);
			useUserStore().setAuth(res.auth);
			useUserStore().setUserInfo(res.user);
			useThemeStore().setTheme("blue");
			uni.redirectTo({
				url: '/pages/index/index'
			});
		});
	}
</script>
<style lang="scss" scoped>
	.login {
		position: relative;
		width: 100%;
		height: 100%;

		.loginDiv {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			padding: 40px 20px;
			background: linear-gradient(0deg, rgba(95, 131, 249, .5), rgba(95, 131, 249, 1));
			box-sizing: border-box;

			::v-deep .uni-easyinput {
				background: #fff;
			}
		}

		.title {
			color: #fff;
			margin-top: 64px;
			padding: 0 30px;
			font-size: 25px;
			font-weight: 500;
		}

		.subtitle {
			color: #fff;
			margin-top: 10px;
			font-size: 18px;
			font-weight: 500;
			padding: 0 30px;
		}

		.login-type {
			margin-top: 60px;
			padding: 0 16px;

			.item {
				margin: 0 10px;
				padding: 8px 0;
			}

			.active {
				color: #fff;
				border-bottom: 2px solid #fff;
			}
		}

		.content {
			background: #fff;
			margin: 30px 0;
			padding: 20px;
			border-radius: 20px;

			::v-deep .uni-easyinput__content {
				border-radius: 0;
			}

			::v-deep .uni-easyinput__content-input {
				padding: 0 !important;
			}

			::v-deep .label-text {
				font-weight: 600;
				font-size: 16px;
				margin-bottom: 10px;
			}

			::v-deep .is-input-border {
				border: 0;
				border-bottom: 1px solid #dadada;
			}
		}

		.loginbtn {
			padding: 10px;
			color: #fff;
			font-size: 16px;
			text-align: center;
			border-radius: 40px;
			background-color: $theme-color;
		}
	}
</style>